<template>
    <div class="home">
      <div class="content">
        <!-- 头部 -->
        <div class="header">
          <div class="text">外卖</div>
          <div class="location">
            <van-icon name="location" />
            <span>南职C-201</span>
            <van-icon name="arrow" />
          </div>
        </div>
        <!-- 主要内容 -->
        <div class="main">
          <div class="main_bg">
            <div class="search">
              <input type="text" />
              <div class="search_text">搜索</div>
            </div>
            <div class="classify">
                <!-- 大分类 -->
              <div class="big_classify">
                
                
              </div>
              <!-- 小分类 -->
              <div class="small_classify">
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>


<style lang="less">
.home {
  display: flex;
  flex-flow: column;
  height: 100%;

  .content {
    flex: 1;
    overflow-y: auto;
    .main {
      margin-top: -30px;
      .van-tabs {
        padding: 0 20px 10px;
      }
      .main_bg {
        background-image: linear-gradient(#fff, #f5f5f5);
        padding: 10px 5px 0 5px;
        border-radius: 10px 10px 0 0;
        position: relative;
        .classify {
          padding: 20px 0;
          .small_classify {
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;
            
          }
          .big_classify {
            display: flex;
            
            }
          }
        }

        .search {
          position: relative;
          .search_text {
            position: absolute;
            background-color: #ffc400;
            right: -4px;
            top: 1px;
            width: 50px;
            height: 20px;
            border-radius: 16px;
            text-align: center;
            line-height: 20px;
            font-size: 10px;
          }
          input {
            width: 100%;
            border: 1px solid #ffc400;
            border-radius: 20px;
            height: 20px;
          }
        }
      }
    }

    .header {
      background-image: linear-gradient(#ffc400, #fff);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 5px 40px 5px;
      .text {
        font-size: 12px;
        font-weight: 600;
      }
      .location {
        span {
          margin: 0 5px;
        }
        font-size: 10px;
      }
    }
  }
</style>